<template>
	<div class="nearAgent">
		<NewsHeader 
			:isInput="dataArr.isInput" 
			:iconArr="dataArr.iconArr" 
			:placeholder="dataArr.placeholder" 
			:aimUrl = 'dataArr.aimUrl'
			:rightUrl='dataArr.rightUrl'
		/>
		<div class="checkoutMsg">
			<div :class="index==(itemArr.length-1)?'content-list':'content-list borderBot'" v-for="(item,index) in itemArr " :key="index">
				<div>
					<img :src="item.imgUrl" alt="">
				</div>
				<div>
					<p>{{item.title}}</p>
					<p>{{item.descript}}</p>
					<p><span>{{item.iconname}}</span><span>{{item.common}}</span></p>
				</div>
				<div>
					<span>{{item.juli}}</span>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import NewsHeader from '../../../components/shopheader'

export default{
	name:'nearAgent',
	components:{
		NewsHeader,
	},
	data(){
		return{
			itemArr:[
				{
					imgUrl:require("../../../assets/images/mine/img_kefu@2x.png"),
					title:"主营宜居公寓",
					descript:"二手房源45套",
					iconname:"柳柳",
					common:"宜居",
					juli:"2.1km"
				},
				{
					imgUrl:require("../../../assets/images/mine/img_touxiangweiliao@2x.png"),
					title:"主营宜居公寓",
					descript:"二手房源45套",
					iconname:"柳柳",
					common:"宜居",
					juli:"2.1km"
				},
				{
					imgUrl:require("../../../assets/images/mine/img_kefu@2x.png"),
					title:"主营宜居公寓",
					descript:"二手房源45套",
					iconname:"柳柳",
					common:"宜居",
					juli:"2.1km"
				},
				{
					imgUrl:require("../../../assets/images/mine/img_touxiangweiliao@2x.png"),
					title:"主营宜居公寓",
					descript:"二手房源45套",
					iconname:"柳柳",
					common:"宜居",
					juli:"2.1km"
				},
				{
					imgUrl:require("../../../assets/images/mine/img_touxiangweiliao@2x.png"),
					title:"主营宜居公寓",
					descript:"二手房源45套",
					iconname:"柳柳",
					common:"宜居",
					juli:"2.1km"
				}
			],
			dataArr:{
				isInput:false,
				iconArr:[
					{
						iconLeft:"icon-zuojiantou",
						iconRight:""
					}
				],
				placeholder:"附近经纪人",
				aimUrl:'/smalltalk_page',
				rightUrl:''
			},
		}
	}
}
</script>
<style scoped lang="less">
.nearAgent{
	width: 100%;
	min-height:1334 / 100rem;
	padding-top: 88 / 100rem;
	box-sizing: border-box;
	background-color: #fff; 
	overflow: hidden;
	.checkoutMsg{
		width: 95%;
		margin: 20 / 50rem auto;
		box-shadow: 0 0 10 / 50rem 1 / 50rem rgba(0,0,0,.1);
		border-radius: 10 / 2 / 50rem;
		div.borderBot{
			border-bottom: 2 / 50rem solid rgba(0,0,0,.1);
		}
		.content-list{
			width: 100%;
			height: 70 / 50rem;
			position: relative;
			overflow: hidden;
			div{
				float: left;
				img{
					width: 60 / 50rem;
					height: 60 / 50rem;
					vertical-align: middle;
				}
			}
			div:nth-child(1){
				width: 20%;
				height: 100%;
				text-align: center;
				margin-top: 5 / 50rem;
			}
			div:nth-child(2){
				width: 60%;
				height: 100%;
				color: #333;
				font-size: 15 / 50rem;
				font-weight: 700;
				margin-top: 5 / 50rem;
				padding-left:20 / 2 / 50rem;
				box-sizing: border-box;
				p{
					margin-top: 3 / 50rem;
					margin-bottom: 3 / 50rem;
					span:nth-child(2){
						display: inline-block;
						margin-left: 40 / 2 / 50rem;
					}
				}
			}
			div:nth-child(3){
				width: 20%;
				height: 100%;
				position: relative;
				span{
					position: absolute;
					bottom: 15 / 50rem;
					right: 15 / 50rem;
				}
			}
		}
	}
}		
</style>







